<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 疫苗预约系统</title>
    <link rel="stylesheet" href="css/login.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 左侧装饰区域 -->
        <div class="left-section">
            <div class="logo-section">
                <i class="fas fa-syringe logo-icon"></i>
                <h1>疫苗预约系统</h1>
                <p class="subtitle">Vaccine Appointment System</p>
            </div>
            <div class="illustration">
                <i class="fas fa-shield-virus illustration-icon"></i>
            </div>
            <p class="welcome-text">守护健康，从预防开始</p>
        </div>

        <!-- 右侧登录表单区域 -->
        <div class="right-section">
            <div class="login-box">
                <h2 class="form-title">用户登录</h2>
                <p class="form-subtitle">欢迎回来，请登录您的账号</p>

                <!-- 登录表单 -->
                <form id="loginForm" class="login-form">
                    <!-- 账号输入框 -->
                    <div class="form-group">
                        <label for="account">
                            <i class="fas fa-user"></i>
                            账号
                        </label>
                        <input 
                            type="text" 
                            id="account" 
                            name="account" 
                            placeholder="请输入您的账号"
                            autocomplete="username"
                            required>
                        <span class="error-message" id="accountError"></span>
                    </div>

                    <!-- 密码输入框 -->
                    <div class="form-group">
                        <label for="password">
                            <i class="fas fa-lock"></i>
                            密码
                        </label>
                        <div class="password-wrapper">
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                placeholder="请输入您的密码"
                                autocomplete="current-password"
                                required>
                            <i class="fas fa-eye toggle-password" id="togglePassword"></i>
                        </div>
                        <span class="error-message" id="passwordError"></span>
                    </div>

                    <!-- 记住我 -->
                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" id="rememberMe" name="rememberMe">
                            <span>记住我</span>
                        </label>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit" class="btn-login" id="loginBtn">
                        <span class="btn-text">登录</span>
                        <span class="btn-loading" style="display: none;">
                            <i class="fas fa-spinner fa-spin"></i> 登录中...
                        </span>
                    </button>

                    <!-- 注册链接 -->
                    <div class="register-link">
                        还没有账号？<a href="register.html">立即注册</a>
                    </div>
                </form>

                <!-- 提示信息 -->
                <div class="alert" id="alertBox" style="display: none;">
                    <i class="fas fa-exclamation-circle"></i>
                    <span id="alertMessage"></span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/login.js"></script>
</body>
</html>
